<template>
  <div class="square-box">
    <el-row class="square-row" :gutter="20">
      <el-col class="square-col" :span="15" :offset="2">
        <div class="title">微博广场</div>
        <div class="weibo-content-box" v-for="item of squareContent" :key="item.id" >
            <div class="weibo-content" >
              <el-image
                style="width: 50px; height: 50px;"
                :src="item.userPhoto"
                fit="fill"
                lazy
              >
              </el-image>
              <div class="content-text">
                <span>{{item.userName}}</span>：
                {{item.content}}
               <br>
               <p class="data">01.20 16:38</p>
              </div>
              <el-image
                v-if="item.imgUrl"
                style="width: 100px;max-height:100px;display: inline-block;"
                :src="item.imgUrl[0]"
                :preview-src-list="item.imgUrl"
                fit="scale-down"
                lazy
              >
              </el-image>
            </div>
            
          </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'square',
  data(){
    return{
      squareContent:[
        {
          id:1,
          userName:'张三',
          content:'你是天使吗？！！！',
          data:'01.20 16:38',
          userPhoto:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          imgUrl:[
            'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
          ]
        },
        {
          id:2,
          userName:'李四',
          content:'没错！！！',
          data:'01.20 16:38',
          userPhoto:'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
          imgUrl:[
            'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
          ]
        },
         {
          id:3,
          userName:'李四',
          content:'快到碗里来（奸笑）',
          data:'01.20 16:38',
          userPhoto:'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
          imgUrl:[
            'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
          ]
        },
      ]
    }
  },
}
</script>

<style lang="scss">
.square-box{
  margin-top:10px;
  .square-row{
    .square-col{
      .title{
        padding:10px 0;
        font-size: 2rem;
        border-bottom: 1px solid #dee2e6;
      }
      .weibo-content-box{
        padding:10px 0;
        font-size: 1.1rem;
        border-bottom: 1px solid #dee2e679;
        .weibo-content{
           display: flex;
          .content-text{
            display: inline-block;
            vertical-align: top;
            width:72%;
            margin:0 auto;
            word-wrap: break-word;
            word-break: break-all;
            span{
              color:#007bff;
            }
            &  span:hover{
              cursor: pointer;
              text-decoration: underline;
              color:#045ebe;
            }
            .data{
              margin-top:.8rem;
              color: rgb(102, 102, 102);
              font-size:.9rem;
            }
          }
          
        }
      }
    }
  }
}
</style>